<template>
  <div class="app-container">
    <!-- filter -->
    <filter-form :form="listQuery" :data="filterData" :has-default-operation="false" style="margin-bottom: 10px;">
      <el-button type="primary" size="mini" icon="el-icon-search" @click="getListPage">查询</el-button>
    </filter-form>
    <!-- filter -->
    <div ref="main" class="v-flex-elastic">
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        tooltip-effect="dark"
        style="width: 100%;">
        <el-table-column label="序号" type="index" width="50" align="center" />
        <el-table-column align="center" label="边设备名称" prop="nodeName" />
        <el-table-column align="center" label="设备唯一标识" prop="nodeId" />
        <el-table-column align="center" label="产品类型" prop="product.productName" />
        <!-- <el-table-column align="center" label="子设备标识" prop="deviceId" /> -->
        <!--      <el-table-column align="center" label="设备描述" prop="description">-->
        <!--        <template slot-scope="scope">-->
        <!--          <el-input v-model="scope.row.description" @input="saveDesc(scope.row)" />-->
        <!--        </template>-->
        <!--      </el-table-column>-->
        <el-table-column label="厂商ID" align="center" prop="manufacturerId" />
        <el-table-column label="设备型号" align="center" prop="model" width="150" />
        <el-table-column prop="tag" label="连接状态" align="center" width="150">
          <template slot-scope="scope">
            <el-tag :type="scope.row.connectStatus === 'ONLINE' ? 'success' : 'info'" disable-transitions>{{ scope.row.connectStatusName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120" align="center">
          <template slot-scope="scope">
            <span style="margin-right: 10px">
              <el-tooltip class="item" content="修改" effect="light" placement="top">
                <el-button circle icon="el-icon-edit" size="mini" type="primary" @click="handleUpdate(scope.row)" />
              </el-tooltip>
            </span>
            <span style="margin-right: 10px">
              <el-tooltip class="item" content="实时数据" effect="light" placement="top">
                <el-button circle icon="el-icon-pie-chart" size="mini" type="primary" @click="gotoInTimeData(scope.row)" />
              </el-tooltip>
            </span>
            <span style="margin-right: 10px">
              <el-tooltip class="item" content="查看" effect="light" placement="top">
                <el-button circle icon="el-icon-view" size="mini" type="primary" @click="handleView(scope.row)" />
              </el-tooltip>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page-box">
      <pagination :total="total" :page.sync="listQuery.pageNum" :size.sync="listQuery.pageSize" @pagination="getListPage" />
    </div>
    <!-- 分页 -->

    <!-- 添加或修改设备档案对话框 -->
    <div v-if="open">
      <base-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" append-to-body width="40%" @updateData="submitForm" @closed="cancel">
        <el-form ref="form" :model="form" label-width="120px">
          <el-row>
            <el-col :span="11">
              <el-form-item label="设备名称" prop="nodeName">
                <el-input v-model="form.nodeName" placeholder="请输入设备名称" />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="厂商" prop="manufacturerId">
                <el-input v-model="form.manufacturerId" placeholder="请输入厂商" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col v-if="form.model === 'RANG' || form.model === 'DPMT' " :span="22">
              <el-form-item label="归零值" prop="description">
                <el-input v-model="form.benchmark" placeholder="请输入归零值" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item label="设备描述" prop="description">
                <el-input v-model="form.description" placeholder="请输入内容" type="textarea" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" placeholder="请输入内容" type="textarea" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!--          <el-button type="primary" @click="submitForm">确 定</el-button>-->
        <!--          <el-button @click="cancel">取 消</el-button>-->
      </base-dialog>
    </div>
  </div>
</template>

<script>
import { getAllProduct as selectProductList } from '@/api/cms/winglinks/product'
import { getListPage, updateDeviceInfo, getDeviceInfoById } from '@/api/cms/winglinks/deviceinfo'
import { tableMixin } from '@/utils/public'
export default {
  name: 'DeviceInfo',
  components: {},
  mixins: [tableMixin],
  data() {
    return {
      dict: {
        deviceType: [{ label: '普通设备', value: '0' }, { label: '网关设备', value: '1' }, { label: 'Lora转4G网关', value: '3' }],
        deviceStatus: [{ label: '启用', value: '1' }, { label: '禁用', value: '0' }],
        productList: []
      },
      // 表格高度
      height: 0,
      tableKey: 0,
      list: null,
      current: 1,
      total: 0,
      listLoading: false,

      // 顶部操作栏配置
      filterData: {
        nodeName: {
          key: 'nodeName',
          type: 'input',
          title: '设备唯一标识',
          placeholder: '请输入设备唯一标识'
        },
        model: {
          key: 'model',
          type: 'select',
          title: '产品',
          placeholder: '选择产品类型',
          props: { label: 'productName', value: 'model' },
          options: [],
          clearable: false
        }
      },
      // 查询参数
      listQuery: {
        pageNum: 1,
        pageSize: 5,
        nodeName: null,
        deId: null,
        model: null
      },

      // 弹窗标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 弹窗表单
      form: {}
    }
  },
  watch: {
  },
  created() {
    this.listQuery.deId = this.$route.query.id
  },
  activated() {
    this.listQuery.deId = this.$route.query.id
    this.getListPage()
    this.selectProductList()
  },
  methods: {
    // 获取产品列表
    selectProductList() {
      selectProductList({}).then(response => {
        this.dict.productList = response.data
        this.filterData.model.options = response.data
      })
    },
    // 查询列表信息
    getListPage() {
      this.listLoading = true
      // 查询列表信息
      getListPage(this.listQuery).then(response => {
        this.list = response.rows
        this.total = response.total
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },

    /** 跳转到实时数据页面**/
    gotoInTimeData(row) {
      const query = {
        deviceIdentification: row.deviceId,
        productIdentification: row.product.productIdentification,
        deviceType: row.deviceType
      }
      if (row.model === 'TEMP') {
        this.$router.push({ path: '/cms/device-data/temperature', query: { 'row': JSON.stringify(query) }})
      } else if (row.model === 'DPMT') {
        this.$router.push({ path: '/cms/device-data/displacement', query: { 'row': JSON.stringify(query) }})
      } else if (row.model === 'RANG') {
        this.$router.push({ path: '/cms/device-data/distance', query: { 'row': JSON.stringify(query) }})
      } else if (row.model === 'DPVN') {
        this.$router.push({ path: '/cms/device-data/inclinationVibration', query: { 'row': JSON.stringify(query) }})
      }
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      this.set = true
      const id = row.id
      getDeviceInfoById({ 'id': id }).then((response) => {
        this.form = response.data
        this.open = true
        this.title = '修改设备档案'
      })
    },
    /** 修改按钮操作 */
    handleView(row) {
      const query = {
        id: row.id,
        nodeId: row.nodeId,
        deviceType: row.deviceType
      }
      this.$router.push({ path: '/cms/device-data/deviceInfoDetail', query: query })
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        nodeName: null,
        description: null,
        manufacturerId: null,
        remark: null
      }
    },
    /**
       * 提交按钮
       */
    submitForm() {
      updateDeviceInfo(this.form).then((response) => {
        this.notifiySuccess('修改成功')
        this.open = false
        this.getListPage()
      })
    },
    // 新增或修改弹窗取消事件
    cancel() {
      this.open = false
      this.reset()
    }

  }
}
</script>
<style lang="scss" scoped>
  /deep/.base-dialog__footer {
    text-align: right;
  }
</style>
